<template>
  <div class="track-page">
    <!-- 顶部返回 & 标题 -->
    <el-page-header @back="$router.back()">
      <template #content>订单追踪 #{{ id }}</template>
    </el-page-header>

    <!-- 轨迹 -->
    <el-card v-if="trackList.length" class="mt-4">
      <template #header>配送轨迹</template>

      <el-steps :active="trackList.length" direction="vertical" finish-status="success">
        <el-step
          v-for="(item, index) in trackList"
          :key="index"
          :title="item.text"
          :description="item.time"
        />
      </el-steps>
    </el-card>

    <!-- 加载/无数据 -->
    <el-empty v-else :description="loading ? '加载中…' : '暂无追踪数据'" />

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getOrderTrack } from '@/api/order'   // ← 确保已在 api/order.js 中实现

/* 1️⃣ 获取路由参数 id */
const route = useRoute()
const id = route.params.id

/* 2️⃣ 数据 */
const trackList = ref([])
const loading = ref(false)

/* 3️⃣ 拉追踪接口 */
// async function fetchTrack () {
//   loading.value = true
//   try {
//     const resp = await getOrderTrack(id)
//     trackList.value = resp.data || []
//   } finally {
//     loading.value = false
//   }
// }

onMounted(fetchTrack)
</script>

<style scoped>
.track-page { padding: 20px; }
.mt-4      { margin-top: 16px; }
</style>
